<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-09 16:24:13
 * @LastEditors: william
 * @LastEditTime: 2025-08-30 16:59:25
-->
<template>
  <nw-PageTitle title="网络配置" isBack />
  <nw-PageContainer>
    <scroll-view class="scroll-content" scroll-y>
      <uni-forms
        ref="uFormRef"
        label-position="left"
        :modelValue="formData"
        :rules="rules"
        class="nw-forms"
      >
        <view class="lists">
          <view class="list">
            <view class="list-top">
              <view class="list-title">请输入接入路由器的名称和密码</view>
            </view>
            <view class="list-content">
              <uni-forms-item name="userName" class="li">
                <template #label>
                  <view class="nw-label">名称:</view>
                </template>
                <view class="li-right">
                  <nw-Input v-model="formData.userName" label="名称"></nw-Input>
                </view>
              </uni-forms-item>
              <uni-forms-item name="password" class="li">
                <template #label>
                  <view class="nw-label">密码:</view>
                </template>
                <view class="li-right">
                  <nw-Input v-model="formData.password" label="密码"></nw-Input>
                </view>
              </uni-forms-item>
            </view>
          </view>
        </view>
      </uni-forms>
      <view class="btn-wrap">
        <nw-Button text="发送" @click="handleSubmit"></nw-Button>
      </view>
    </scroll-view>

    <up-toast ref="uToastRef" />
    <SubmitTip v-if="submitTipVisible" v-model="submitTipVisible" />
  </nw-PageContainer>
</template>

<script setup>
import SubmitTip from './component/SubmitTip.vue'

// 表单参数
const uFormRef = ref(null)
const formData = ref({
  userName: '',
  password: ''
})
// 校验规则
const rules = {
  userName: {
    rules: g_rules.commonInputText('名称')
  },
  password: {
    rules: g_rules.commonInputText('密码')
  }
}
// 弹框参数
const uToastRef = ref(null)
const submitTipVisible = ref(false)

onMounted(_ => {
  //
})
const handleSubmit = _ => {
  console.log('handleSubmit', formData.value)
  // uToastRef.value.show({
  //   type: 'success',
  //   message: '发送成功'
  // })
  uFormRef.value
    .validate()
    .then(res => {
      submitTipVisible.value = true
    })
    .catch(err => {
      console.log('err', err)
    })
}
</script>

<style lang="scss" scoped>
.scroll-content {
  padding: 0 20rpx 93 * 2+20rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.lists {
  .list {
    margin-top: 22rpx;
    padding: 0 22rpx;
    background-color: var(--bg-color);
    border-radius: 18rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
    border: 1rpx solid var(--bg-color);
    box-sizing: border-box;
    .list-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 74rpx;
      box-sizing: border-box;
    }
    .list-title {
      font-size: 26rpx;
      font-weight: 600;
      color: var(--color-333);
    }
  }
}

.list-content {
  .li {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1rpx solid var(--border-color);
    .li-right {
      display: flex;
      align-items: center;
      max-width: 300rpx;
      margin-left: 20rpx;
    }
  }
}

.btn-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 48rpx 40rpx;
  box-sizing: border-box;
  .nw-button-wrap {
    width: 100%;
  }
  :deep(.nw-button) {
    height: 54rpx;
    border-radius: 28rpx;
    .u-button__text {
      font-size: 24rpx !important;
    }
  }
}
</style>
